<template>
  <div>
    <!-- <div class="qup-page-heade bread-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="btn-green" @click.native="goBack">门店返利</el-breadcrumb-item>
        <el-breadcrumb-item>返利政策变更</el-breadcrumb-item>
      </el-breadcrumb>

      <div>
        <el-button :loading="saveLoading" size="mini" type="primary" @click="submitForm">提交</el-button>
        <el-button size="mini" @click.native="goBack">返回</el-button>
      </div>
    </div> -->
    <div style="display:flex;flex-direction:row-reverse;margin-top:10px">
      <el-button :loading="saveLoading" size="mini" type="primary" @click="submitForm">提交</el-button>
    </div>
    <div v-loading="dataLoading">
      <!-- 返利政策变更信息 -->
      <div class="qup-title-box"><span class="border" /><span>返利政策变更信息</span></div>
      <el-form
        ref="refForm"
        :rules="formRules"
        :model="formData"
        size="mini"
        label-width="170px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="当前卖场返利核算:" prop="">
              <el-input v-model="beforeData.shopAccounting" disabled type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="变更后卖场返利核算:" prop="shopAccounting">
              <el-input v-model="formData.shopAccounting" maxlength="1000" show-word-limit type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="当前门头返利核算:" prop="">
              <el-input v-model="beforeData.dheadAccounting" disabled type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="变更后门头返利核算:" prop="dheadAccounting">
              <el-input v-model="formData.dheadAccounting" maxlength="1000" show-word-limit type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="当前是否涉及月返:" prop="">
              <el-select
                v-model="beforeData.isMonthReturn"
                disabled
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="变更后是否涉及月返:" prop="isMonthReturn">
              <el-select
                v-model="formData.isMonthReturn"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="变更说明:" prop="changeDesc">
              <el-input v-model="formData.changeDesc" maxlength="1000" show-word-limit type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 变更详情 todo-->
      <el-form
        style="margin-top:20px"
        size="mini"
        label-width="150px"
      >
      <!-- <el-row>
        <el-col :span="8">
          <el-form-item label="所属门店:" prop="shopCode">
            <input-with-dialog
              v-model="shop"
              :props="{label:'name',value:'code'}"
              :config="dialogConfigShop"
              @change="handleChangeShop"
            />
          </el-form-item>
        </el-col> -->
      <!-- <el-col :span="8">
          <el-form-item label="返利申请号:" prop="applyCode">
            <input-with-dialog
              v-model="apply"
              :props="{label:'rebateApplyCode',value:'rebateApplyCode'}"
              :config="dialogConfigApply"
              @change="handleChangeApply"
            />
          </el-form-item>
        </el-col> -->
      <!-- <el-col :span="8">
          <el-form-item label="返利进度:">
            {{ detailData.schedule }}
          </el-form-item>
        </el-col>
      </el-row> -->
      </el-form>
      <base-info :detail-data="detailData" />
    </div>

  </div>
</template>
<script>
import baseInfo from '../component/rebateBaseInfo.vue'
import { getDetailByApplyCode, saveChangeRule, getDetailById } from '@/api/shopChangeRule'
import BackPageMixin from '@/mixins/backPage'
export default {
  name: 'RuleChange',
  components: { baseInfo },
  mixins: [BackPageMixin],
  props: {
    // id: {
    //   type: String,
    //   default: ''
    // },
    // applyCode: {
    //   type: String,
    //   default: ''
    // }
  },
  data() {
    return {
      dataLoading: false,
      saveLoading: false,
      id: '',
      applyCode: '',
      formRules: {
        shopAccounting: [{ required: true, message: '请填写变更后卖场返利核算', trigger: 'change' }],
        dheadAccounting: [{ required: true, message: '请填写变更后门头返利核算', trigger: 'change' }],
        isMonthReturn: [{ required: true, message: '请选择变更后是否涉及月返', trigger: 'change' }],
        changeDesc: [{ required: true, message: '请填写变更说明', trigger: 'change' }]
      },
      detailData: {},
      beforeData: {
        shopAccounting: '',
        dheadAccounting: '',
        isMonthReturn: ''
      },
      formData: {
        // shopCode: '',
        // shopName: '',
        // applyCode: '',
        id: '',
        beforeShopAccounting: '',
        shopAccounting: '',
        beforeDheadAccounting: '',
        dheadAccounting: '',
        beforeIsMonthReturn: '',
        isMonthReturn: '',
        changeDesc: ''
      },
      dialogConfigShop: {
        title: '门店',
        interfacePath: `/select-service/api/v1/shop/page`,
        setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }]
      },
      dialogConfigApply: {
        title: '返利申请号',
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/shopRebate/page`,
        setting: [{ prop: 'rebateApplyCode', title: '返利申请单号' }, { prop: 'shopName', title: '门店名称' }]
      }

    }
  },
  created() {
    this.applyCode = this.$route.query.applyCode
    this.id = this.$route.query.id
    if (this.applyCode) {
      this.dataLoading = true
      this.formData.id = this.id
      getDetailByApplyCode(this.applyCode).then(res => {
        if (res.success === 1) {
          // this.formData.shopCode = res.data.shopCode
          // this.formData.shopName = res.data.shopName
          this.beforeData.shopAccounting = res.data.shopAccounting
          this.beforeData.dheadAccounting = res.data.dheadAccounting
          this.beforeData.isMonthReturn = res.data.isMonthReturn
          this.formData.applyCode = res.data.applyCode
          this.detailData = res.data
          this.dataLoading = false
        }
      }).catch(() => {
        this.dataLoading = false
      })
    }
    if (this.id) {
      getDetailById(this.id).then(res => {
        if (res.success === 1) {
          this.formData.changeDesc = res.data.changeDesc
          const { id,
            beforeShopAccounting,
            shopAccounting,
            beforeDheadAccounting,
            dheadAccounting,
            beforeIsMonthReturn,
            isMonthReturn,
            changeDesc } = res.data
          this.formData = { id,
            beforeShopAccounting,
            shopAccounting,
            beforeDheadAccounting,
            dheadAccounting,
            beforeIsMonthReturn,
            isMonthReturn,
            changeDesc }
          // this.beforeData.shopAccounting = res.data.shopAccounting
          // this.beforeData.dheadAccounting = res.data.dheadAccounting
          // this.beforeData.isMonthReturn = res.data.isMonthReturn
        }
      })
    }
  },
  methods: {
    // 门店改变
    handleChangeShop(data) {
      if (data.length !== 0) {
        this.formData.shopCode = data[0].code
        this.formData.shopName = data[0].name
      } else {
        this.formData.shopCode = ''
        this.formData.shopName = ''
      }
    },
    // 返利申请单号改变
    handleChangeApply(data) {
      if (data.length !== 0) {
        this.formData.applyCode = data[0].rebateApplyCode
      } else {
        this.formData.applyCode = ''
      }
    },
    submitForm() {
      this.$refs['refForm'].validate((valid) => {
        if (valid) {
          this.saveLoading = true
          this.formData.beforeShopAccounting = this.beforeData.shopAccounting
          this.formData.beforeDheadAccounting = this.beforeData.dheadAccounting
          this.formData.beforeIsMonthReturn = this.beforeData.isMonthReturn
          this.formData.constCode = this.detailData.constCode
          this.$set(this.formData, 'state', 'B')
          saveChangeRule(this.formData).then(res => {
            if (res.success === 1) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.$store.dispatch('views/goBack')// 返回列表页
              this.saveLoading = false
            }
          }).catch(() => {
            this.saveLoading = false
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
</style>
